
/*服务范围*/
.introductblock{  margin-top: 30px ; background: url(../images/bg1.jpg) no-repeat center top; background-size: 100% 100%  }
.introcon{width:100%; overflow:hidden; clear:both;   overflow: hidden; }
.introcon dl{ float:left;  width:240px; padding:28px; text-align: center; }
.introcon dl:last-child { border-right: none; }

.introbox strong{ font-size: 24px;  font-weight: bold; line-height: 70px; text-align: center; display: block;  }
.introbox p{ line-height: 30px; font-size: 16px; margin-bottom:50px; }
.introcon dl a{ display: block; text-align: center; float: left; width: 100% }
.introcon dl dt{background: url(../images/cycle.png) no-repeat center top; height: 182px; width: 182px}
.introcon dl a img{ display: inline-block; overflow: hidden; float:none!important; margin-bottom: 20px; margin-top:60px;   }
.introcon dl:hover dt img{-webkit-animation: icon-bounce 0.5s alternate;
  -moz-animation: icon-bounce 0.5s alternate;
  -o-animation: icon-bounce 0.5s alternate;
  animation: icon-bounce 0.5s alternate;}
.introcon dl p{ color:#000; font-size:16px; margin-bottom: 10px; line-height: 50px}
.introcon dl dt{ float:left;  text-align: center; display:block; width: 100%;}
.introcon dl dd{ float:left;color:#999; text-align: center; width: 100%;}


@keyframes icon-bounce {
  0%, 100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  75% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  85% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
}
@-webkit-keyframes icon-bounce {
  0%, 100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  75% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  85% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
}
@-moz-keyframes icon-bounce {
  0%, 100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  75% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  85% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
}
@-o-keyframes icon-bounce {
  0%, 100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  75% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  85% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
}







/*关于我们*/
.indexabout{width: 1200px;position: relative; border:5px solid #bc0000; margin:150px auto; height: 300px}
.abouttext { position: absolute; left:50px; top: 100px; height: 125px; width: 600px; overflow: hidden; line-height: 25px}
.aboutimg { position: absolute; right:50px; top: -50px; height: 380px; width: 400px }
.aboutimg  img{ height: 100%; width: 100% }
.more{ position: absolute; left: 30px; top: 270px; background: #303440; height: 60px; width: 60px; line-height: 60px; text-align: center; transition: 0.5s  }
.more a{ display: block; font-size: 30px }
.more:hover a{ background: #bc0000; color: #fff }
.indexabout .indextit{ margin-top: 10px; margin-left:50px }





/*首页标题*/
.indextit{margin-top:40px; margin-bottom: 20px; text-align: center;}
.indextit p{font-size: 16px;}
.indextit span{font-size:24px;font-weight:bold;display: inline-block;color: #000;display: block;line-height: 40px}
.indextit em{height: 5px;width:70px;background: #bc0000;display: inline-block;}





/*产品*/
.check_tit{ margin-top: 30px;  margin-bottom: 10px }
.check_tit em{ display:inline-block; cursor: pointer; margin:0 5px 20px 5px; background: #bc0000;  
 text-align: center; font-size: 12px; padding: 0 30px;  transition: 0.5s; width:200px; height:50px; 
 line-height:50px; color: #fff;overflow: hidden; }
.check_tit em:hover,.check_tit em.on{ background: #ed2a2d; color: #fff;background:#333;  }
.probox { position: relative;  height: 500px }
.probg{ background: #bc0000; height: 466px; width: 700px; position: absolute; left: 0 ; top: 0; z-index: 0 }
.probox .more{ position: absolute; width:300px; height: 200px; left: 900px; top:230px; z-index: 100;background: #bc0000  }
.probox .more a{ display: block; margin: 15px;  border: 5px solid #fff;color: #fff; height: 170px; line-height: 170px }
.probox .more a:hover{ background: #e94100 }
.check_con{ position: absolute; left:0; top: 0; z-index: 1; width: 1200px; height: 400px}
.check_con ul{margin-top:20px; clear:both; overflow: hidden; padding-top: 10px }
.check_con ul li{ float:left; width:300px; height: 200px; overflow: hidden;   transition: 0.8s;  }
.check_con ul li:nth-child(1){ margin-left: 300px  }

.probox .indextit{ position: absolute;  left: 50px; top: 0;  z-index: 10; color: #fff }
.probox .indextit span{ color: #fff }

.check_con ul li img{ height: 100%; width: 100%; overflow: hidden;}
.check_tit em:hover,.check_tit em.on{ color: #fff;  }
.check_list  li a{ position: absolute; width: 300px; height: 200px;  }
.check_list  li a strong{ position: absolute; left: 0 ; top: 0; z-index: 100;  width: 100%; height: 100%;
 padding: 20px;line-height: 30px; opacity: 0 ; font-size: 20px;  }
 .check_list  li a strong span{ font-size: 14px; display: block; font-weight:normal; color: #999 }
.check_list  li:hover a strong{background: rgba(0,0,0,0.8); color: #fff; opacity: 1; transition: 0.5s}



/*几大优势*/
.good{background: url(../images/goodbg.jpg) no-repeat center top; overflow: hidden; }
.goodlist{ transition: 1s; text-align: center; width: 300px; overflow: hidden; height: 600px; float: left; transition: 0.5  }


.goodlist i{ color: #fff; font-size: 60px; font-weight: bold;  margin-top: 140px;   }
.goodlist i,.goodlist span{ display: block; transition: 0.5s }
.goodlist .img2{ width: 90%; height: 0; margin:30px auto;  margin-left: 5%;  transition: 0.5s  }

.goodlist h3{ color: #fff; font-size: 20px; font-weight: bold; transition: 1s; display: block; width: 100%; overflow: hidden; margin-top:30px; }
.goodlist span{ width: 60%; margin:0 auto; margin:30px auto; line-height: 30px; height: 90px; overflow: hidden; color: #fff  }


.goodlist:hover{ background:rgba(176,0,0,0.7); color: #fff }
.goodlist:hover h3{ color: #fff ; display: block}
.goodlist:hover i{ display: block; opacity: 1; margin-top: 40px; margin-bottom: 40px }

.goodlist:hover .img2{height: 180px}



.messagebox{ background: url(../images/index_22.jpg) no-repeat center top fixed; background-size: 100% 100%; padding: 100px 0; overflow: hidden;  }

.aboutbox{width: 500px; float: left;  color: #fff }
.aboutbox strong{ font-size: 50px; display: block; font-weight:normal; }
.aboutbox span{  font-size: 18px; line-height: 40px }
.aboutbox p{ margin: 60px auto; line-height: 25px; height: 150px; overflow: hidden;  }

.aboutbox a{ border-radius: 10px;  color: #bb1e05; background: #000; padding:5px 20px }
.aboutbox a:hover{  color: #fff; }
/*留言板*/
.message {
  background: #fff;
  width: 460px;
  padding: 20px;
  margin: 0 auto;
  margin-top:30px;
  float: right;
}
.message p{
  text-align: center;
}
.message p strong{
  font-size: 30px;
  display: block;
  color: #000;
}
.message p em{
  color: #eeb819;
  font-size: 14px;

}
.message form{
  margin-top: 20px;
}

.message form label{ 
  display: block;
  margin-bottom: 20px
   }
   
.message form label span{ 
  width: 100px; 
display: inline-block; 
text-align: left;
font-size: 16px;
 }

.message form label input{
  border: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  min-height: : 40px; 
  line-height: 40px;
  padding-left: 5px;
  background: #f1f1f1;
  width: 300px
}

.message form label.button{ 
  width: 100%;
  height: 40px; 
  background: #333333;
  color:#fff; 
  display: block;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
 }


 .message form label.button input{
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
 }


.message form label textarea{
  border: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  line-height: 40px;
  padding-left: 5px;
  background: #f1f1f1;
  width: 300px}



.key { margin-top: 20px; }
.key h4{ color: #fff; }
.key div{padding: 10px}
.key p{ font-size: 12px; line-height: 30px; color: #666;   }
.key p span{ color: #000;}




.Box {position: relative; padding-bottom: 50px;  overflow: hidden; }
.Box .content {width: 1200px;margin: 0 auto;}
.Box .Box_con {position: relative;}
.Box .Box_con .btnl {position: absolute;}
.Box .Box_con .btn {display: block;width: 41px;height: 41px;position: absolute;top: 80px;cursor: pointer;}
.Box .Box_con .btnl {background: url(../images/jtl02.png) no-repeat center;left: -72px;}
.Box .Box_con .btnr {background: url(../images/jtr02.png) no-repeat center;right: -72px;}
.Box .Box_con .btnl:hover {background: url(../images/jtl03.png) no-repeat center;}
.Box .Box_con .btnr:hover {background: url(../images/jtr03.png) no-repeat center;}
.Box .Box_con .conbox {position: relative;overflow: hidden;}
.Box .Box_con .conbox ul {position: relative;list-style: none; padding-bottom: 50px; overflow: hidden;}
.Box .Box_con .conbox ul li {float: left;width: 285px;height: 250px;margin-left: 20px;overflow: hidden; background: #fff}
.Box .Box_con .conbox ul li:first-child {margin-left: 0;}
.Box .Box_con .conbox ul li .pimg{ width: 285px; height: 200px; overflow: hidden; }
.Box .Box_con .conbox ul li img {display: block;width: 285px;height: 200px;transition: all 0.5s;}
.Box .Box_con .conbox ul li:hover img {transform: scale(1.1); height: 200px;}
.Box .Box_con .conbox ul li span{ line-height: 30px; text-align: center; display:block; }


.Box .BoxSwitch {text-align: center;}
.Box .BoxSwitch span {display: inline-block;*display: inline;*zoom: 1;vertical-align: middle;
    width: 30px;height: 3px;background: #ccc;margin: 0 5px;cursor: pointer;}
.Box .BoxSwitch span.cur {background: #f8ba29;}




.leftnew{ float: right; width: 400px; height:377px; overflow: hidden; } 
.newscon a{ display: block; }
.newscon a span{ font-size: 16px; line-height: 40px  }
.newscon a em{ float: right; line-height: 40px }
.newscon a p{ font-size: 14px; color: #999 }

.rightnew{ float: left; width: 750px } 
.newscon a:hover span{ color: #bc0000 }
.leftnew img{ width: 100%; height: 100% }
.rightnew dl{ clear: both; display: block; margin-bottom: 20px; height: 106px; overflow: hidden; overflow: hidden; }
.rightnew dl dt{ float: left; width: 150px }
.rightnew dl dd{ float: right; width: 580px }
.rightnew dl dt img{ width: 150px; height: 100px; overflow: hidden; }


